<script setup>
import { ref } from 'vue'
import {PostArticleService,upload} from '@/apis/square.js'
import {useRouter} from 'vue-router'
const router=useRouter()
const ActicleForm=ref({
  title:'',
  content:'',
  pictures:[]
})
const postArticle=async()=>{
  console.log("发布文章内容",ActicleForm.value);
  const res =await PostArticleService(ActicleForm.value)
  // console.log(res);
  ElMessage.success('发布成功')
  router.push('/square')
}

//收集文章图片
const imgList=ref([])

const pictureUpload= async function (file){
    console.log(file)
    const formData = new FormData();
    formData.append('file',file)
    const res = await upload(formData)

    const url = res.data.data
    imgList.value.push(url) 
    ActicleForm.value.pictures.push(url)
    console.log(res)
}
</script>

<template>
  <!-- <h1 class="title" style="margin-bottom: 20px;">我的文章</h1> -->
  
  <el-form :model="ActicleForm">
    <el-form-item label="文章标题">
      <el-input v-model="ActicleForm.title" placeholder="请输入文章标题"></el-input>
    </el-form-item>
    <el-form-item label="文章内容">
      <el-input type="textarea" v-model="ActicleForm.content" placeholder="请输入文章内容"></el-input>
    </el-form-item>
    <el-form-item label="文章图片">
      <div v-for="(pic,index) in imgList" :key="index" class="picture">
        <img  :src="pic">
      </div>
      <el-upload
        list-type="picture-card"
        :before-upload="pictureUpload">
      <el-icon><Plus /></el-icon>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="postArticle" class="title" size="large">确认发布</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">
.title{
  //居中
  margin: 0 auto;
  text-align: center;
}
.picture{
  display: inline-block;
  margin-right: 10px;
  img{
    width: 150px;
    height: 150px;
  }
}

</style>